<script setup lang="ts">
import { Button } from '@/lib/registry/new-york/ui/button'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/lib/registry/new-york/ui/dialog'
</script>

<template>
  <Dialog>
    <DialogTrigger as-child>
      <Button variant="secondary">
        View code
      </Button>
    </DialogTrigger>
    <DialogContent class="sm:max-w-[625px]">
      <DialogHeader>
        <DialogTitle>View code</DialogTitle>
        <DialogDescription>
          You can use the following code to start integrating your current
          prompt and settings into your application.
        </DialogDescription>
      </DialogHeader>
      <div class="grid gap-4">
        <div class="rounded-md bg-black p-6">
          <pre>
              <code class="grid gap-1 text-sm text-muted-foreground [&_span]:h-4">
                <span>
                  <span class="text-sky-300">import</span> os
                </span>
                <span>
                  <span class="text-sky-300">import</span> openai
                </span>
                <span />
                <span>
                  openai.api_key = os.getenv(
                  <span class="text-green-300">
                    &quot;OPENAI_API_KEY&quot;
                  </span>
                  )
                </span>
                <span />
                <span>response = openai.Completion.create(</span>
                <span>
                  model=
                  <span class="text-green-300">&quot;davinci&quot;</span>,
                </span>
                <span>
                  prompt=<span class="text-amber-300">&quot;&quot;</span>,
                </span>
                <span>
                  temperature=<span class="text-amber-300">0.9</span>,
                </span>
                <span>
                  max_tokens=<span class="text-amber-300">5</span>,
                </span>
                <span>
                  top_p=<span class="text-amber-300">1</span>,
                </span>
                <span>
                  frequency_penalty=<span class="text-amber-300">0</span>,
                </span>
                <span>
                  presence_penalty=<span class="text-green-300">0</span>,
                </span>
                <span>)</span>
              </code>
            </pre>
        </div>
        <div>
          <p class="text-sm text-muted-foreground">
            Your API Key can be found here. You should use environment
            variables or a secret management tool to expose your key to your
            applications.
          </p>
        </div>
      </div>
    </DialogContent>
  </Dialog>
</template>
